<template>
  <el-container>
    <!-- 头部开始 -->
    <el-header style="background-color:#eff2f7" class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/addGood' }">添加数据</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- header右侧头像开始 -->
      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="poputs">
          <div @click="tzHome">首页</div>
          <div @click="tzLogin">退出</div>
        </div>
      </div>
      <!-- header右侧头像结束 -->
    </el-header>
    <!-- 头部结束 -->
    <!-- 主体开始 -->
    <el-main style="background-color:#ffffff" class="main">
      <div class="big-box">
        <div class="mian-top">
          <h2>选择食品种类</h2>
          <div class="top-box">
            <div class="zt-top">
              食品种类
              <template>
                <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width:780px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </div>
            <el-collapse-transition>
              <div class="zt-bottom" v-show="show1">
                <div>
                  食品种类
                  <el-input v-model="input" style="width:780px;margin-left:10px"></el-input>
                </div>
                <div>
                  种类描述
                  <el-input v-model="input" style="width:780px;margin-left:10px"></el-input>
                </div>
                <button>提交</button>
              </div>
            </el-collapse-transition>
            <div class="btn" @click="down">添加食品种类</div>
          </div>
          <h2 class="htwo">添加食品</h2>
          <div class="bottom-box">
            <el-form :rules="rules" :model="ruleForm" class="demo-ruleForm biaoge">
              <el-form-item label="食品名称" prop="name" style="margin-left:30px">
                <el-input v-model="ruleForm.name" style="width:780px"></el-input>
              </el-form-item>
              <el-form-item label="店铺标语" style="margin-left:40px">
                <el-input v-model="ruleForm.name1" style="width:780px;"></el-input>
              </el-form-item>
              <el-form-item label="店铺标语" style="margin-left:40px">
                <el-input v-model="ruleForm.name2" style="width:780px;"></el-input>
              </el-form-item>
              <el-form-item label="上传店铺头像" style="margin-left:40px">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <div style="border: 1px solid #ccc;">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="食品特点" style="margin-left:40px">
                <el-select
                  v-model="value1"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="食品规格" style="margin-left:40px">
                <el-radio v-model="radio" label="1">
                  <span @click="dj" style="width:66px">单规格</span>
                </el-radio>
                <el-radio v-model="radio" label="2">
                  <span @click="dj1" style="width:66px">多规格</span>
                </el-radio>
              </el-form-item>
              <el-row v-show="jisuan" class="content">
                包装费
                <el-input-number
                  v-model="num0"
                  @change="handleChange"
                  :min="0"
                  :max="100"
                  label="包装费"
                  style="margin-left:10px"
                ></el-input-number>
                <br />
                <br />价格
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="0"
                  :max="100"
                  label="价格"
                  style="margin-left:26px"
                ></el-input-number>
                <el-button class="addfood">确认添加食品</el-button>
              </el-row>
              <el-row v-show="biaoge" class="content">
                <!-- ————————————添加规格表格的开始———————————— -->
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="规格" width="180"></el-table-column>
                  <el-table-column prop="name" label="包装费" width="180"></el-table-column>
                  <el-table-column prop="address" label="配送费"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete_guige(scope.$index, scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <el-button type="primary" @click="open">添加规格</el-button> -->
                <el-button type="primary" @click="innerVisible = true">添加规格</el-button>
                <el-button style="background: #20a0ff;color:#fff">确认添加食品</el-button>
                <!-- ————————————添加规格表格的结束———————————— -->
                <!-- 内层弹出框的开始 -->
                <el-dialog width="50%" title="添加规格" :visible.sync="innerVisible" append-to-body>
                  <el-form
                    :model="numberValidateForm"
                    ref="numberValidateForm"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item
                      label="规格"
                      prop="guige"
                      :rules="[
                    { required: true, message: '规格不能为空'},
                  ]"
                    >
                      <el-input
                        type="guige"
                        v-model.number="numberValidateForm.guige"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="包装费">
                      <el-input-number
                        v-model="num1"
                        @change="handleChangePack"
                        :min="1"
                        :max="10"
                        label="描述文字"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="配送费">
                      <el-input-number
                        v-model="num2"
                        @change="handleChangeDelivery"
                        :min="1"
                        :max="10"
                        label="描述文字"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                      <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <!-- 内层弹出框的结束 -->
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 主体结束 -->
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      circleUrl: "https://img01.sogoucdn.com/app/a/100520093/fb41c7c77a2454f7-01eba5833e7e38bc-11cc0200d4b834a0dddb28091fd46806.jpg",
      show1: false, //最上面的盒子显示或隐藏
      jisuan: false, //最下面的计算盒子显示或隐藏
      biaoge: true, //最下面的表格盒子显示或隐藏
      input: "",
      num0: 0, //包装费默认为0
      num: 20, //价格默认为20
      // 弹框的属性
      outerVisible: false,
      innerVisible: false,

      //添加规格的数据
      tableData: [],
      // 添加规格表单——规格
      numberValidateForm: {
        guige: "",
      },
      //添加规格表单——包装费和价格的初始值
      num1: 1,
      num2: 1,
      radio: "2", //食品单规格
      imageUrl: "", //上传头像地址
      // 食品名称
      options: [
        {
          value: "选项1",
          label: "小梅同学",
        },
        {
          value: "选项2",
          label: "小明同学",
        },
        {
          value: "选项3",
          label: "小宝同学",
        },
        {
          value: "选项4",
          label: "小鹏同学",
        },
        {
          value: "选项5",
          label: "小梁同学",
        },
        {
          value: "选项6",
          label: "小胡同学",
        },
        {
          value: "选项7",
          label: "黄金糕",
        },
        {
          value: "选项8",
          label: "双皮奶",
        },
        {
          value: "选项9",
          label: "蚵仔煎",
        },
        {
          value: "选项10",
          label: "龙须面",
        },
        {
          value: "选项11",
          label: "北京烤鸭",
        },
      ],
      value: [],
      //食品特点
      list: [
        {
          value: "好吃",
          label: "好吃",
        },
        {
          value: "不上火",
          label: "不上火",
        },
        {
          value: "即便宜",
          label: "即便宜",
        },
        {
          value: "又好看",
          label: "又好看",
        },
        {
          value: "贱卖啦",
          label: "贱卖啦",
        },
      ],
      value1: [],
      value: "",
      ruleForm: {
        name: "",
        name1: "",
        name2: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入食品名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 头像部分的点击事件
    tzHome() {
      this.$router.push({ path: "/home" });
    },
    tzLogin() {
      this.$router.push({ path: "/login" });
    },
    // 下拉菜单
    down: function () {
      if (this.show1) {
        this.show1 = false;
      } else {
        this.show1 = true;
      }
    },

    // 上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传头像的格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 单选框的返回值
    dj() {
      if (!this.jisuan) {
        this.jisuan = true;
        this.biaoge = false;
      }
    },
    dj1() {
      if (!this.biaoge) {
        this.jisuan = false;
        this.biaoge = true;
      }
    },

    handleChange(value) {
      console.log(value);
    },

    //表单的方法
    onSubmit() {
      console.log("submit!");
    },
    //提交所填规格
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableData.push({
            date: this.numberValidateForm.guige,
            name: this.num1,
            address: this.num2,
          });
          this.numberValidateForm.guige = " ";
          this.innerVisible = false;
        } else {
          console.log("提交失败!");
          return false;
        }
      });
    },
    // 重置规格、包装费、配送费
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.num1 = 1;
      this.num2 = 1;
    },
    //改变包装费的方法
    handleChangePack(value) {
      console.log(value);
    },
    //改变价格的方法
    handleChangeDelivery(value) {
      console.log(value);
    },
    //删除整行规格
    handleDelete_guige(index, row) {
      this.tableData.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  .block {
    position: relative;
  }
  .poputs {
    position: absolute;
    top: 55px;
    left: -20px;
    width: 80px;
    height: 60px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 2px 3px 10px -1px #333;
    display: none;
      div {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #000;
      cursor: pointer;
        &:hover{
          background-color: #e4e8f1;
          color: #333
        }
    }
  }
  &:hover .poputs {
    display: block;
  }

}
.big-box {
  margin: 0 auto;
  width: 930px;
  height: 870px;
  margin-bottom: 50px;
  .mian-top {
    h2 {
      text-align: center;
      font-weight: normal;
      font-size: 18px;
      height: 38px;
      line-height: 38px;
    }
    .top-box {
      width: 100%;
      min-height: 120px;
      border: 1px solid #eaeefb;
      border-radius: 5px;
      .zt-top {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #eaeefb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #48576a;
      }
      .zt-bottom {
        width: 100%;
        height: 185px;
        border-bottom: 1px solid #eaeefb;
        padding-top: 7px;
        padding-left: 45px;
        font-size: 14px;
        background-color: #f9fafc;
        position: relative;
        color: #48576a;
        div {
          &:nth-child(2) {
            margin-top: 20px;
          }
        }
        button {
          position: absolute;
          top: 130px;
          left: 110px;
          width: 60px;
          height: 35px;
          border-radius: 5px;
          border: none;
          background: #20a0ff;
          color: #fff;
          cursor: pointer;
          outline: none;
          &:hover {
            background: #4db3ff;
          }
        }
      }
      .btn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #cccccc;
        font-size: 12px;
        &:hover {
          color: #20a0ff;
        }
      }
    }
    .htwo {
      margin-top: 25px;
    }
    .bottom-box {
      width: 100%;
      min-height: 640px;
      box-sizing: border-box;
      padding-left: 10px;
      padding-top: 10px;
      border: 1px solid #eaeefb;
      border-radius: 5px;
      .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .content {
        width: 910px;
        min-height: 180px;
        padding-left: 50px;
        color: #48576a;
        font-size: 14px;
        position: relative;
        .addfood {
          position: absolute;
          top: 120px;
          left: 100px;
          background: #20a0ff;
          color: #fff;
        }
        // button{
        //   background: #20a0ff;
        //   color: #fff;
        // }
      }
    }
  }
}
</style>